<template>
	<view>
		<view style="padding: 0 20upx;">
			<swiperTabHead ref="swiperTabHeadRef" :tabBars="tabBars" v-model:tabBarsIndex="tabBarsIndex" :itemStyle="{width:'33.3%',margin:'0','box-sizing': 'border-box','text-align': 'center'}"/>
		</view>
		
		<swiper
			class="swiper-box" 
			:style="{height:swiperHeight+'px',}" 
			:current="tabBarsIndex"
			@change="tabChange">
			<swiper-item class="swiper-item"  v-for="(item,index) of newList" :key="index">
				<scroll-view  class="scroll-v list" style="height: 100%;" :scroll-y="true" @scrolltolower="loadingScroll(index)">
					<template v-if="item.list.length>0">
						<!-- 好友列表 -->
						<userList v-for="(item1,index1) in item.list" :key="index1" :item="item1"/>
						<!-- 上拉加载 -->
						<loadMore :loadingText="item.loadingText" v-show="item.list.length>9"></loadMore>
					</template>
					<template v-else>
						<noThing/>
					</template>
				</scroll-view>
			</swiper-item>
		
		</swiper>
		
		
		
	</view>
</template>

<script setup>
	import swiperTabHead from '../../component/index/swiper-tab-head.vue';
	import userList from '../../component/user-list/user-list.vue';
	import loadMore from '../../component/common/load-more.vue';
	import noThing from '../../component/common/no-thing/no-thing.vue'
	import {onNavigationBarButtonTap,onNavigationBarSearchInputConfirmed,onNavigationBarSearchInputChanged} from '@dcloudio/uni-app'
	import {reactive,ref,onMounted} from 'vue';
	import {getPaeApi,getListPaeApi,getFansPaeApi,setUserApi} from '../../api/followApi.js';
	
	const tabBars = ref([
		{
			classname: '互关',
			id: 'huguan',
			num:10,
		}, {
			classname: '关注',
			id: 'guanzhu',
			num:20,
			
		}, {
			classname: '粉丝',
			id: 'fenshi',
			num:30,
		}
	])
	const swiperTabHeadRef = ref();
	const tabBarsIndex = ref(0);
	const newList = ref([
		{
			loadingText:"上拉加载更多",
			list:[],
			page:1,
			flag:false
		},
		{
			loadingText:"上拉加载更多",
			list:[],
			page:1,
			flag:false
		},
		{
			loadingText:"上拉加载更多",
			list:[],
			page:1,
			flag:false
		}
	])
	const swiperHeight = ref(500)
	
	function tabChange(e){
		tabBarsIndex.value = e.detail.current;
		swiperTabHeadRef.value.switchTabbar(null,tabBarsIndex.value)
		if(!newList.value[tabBarsIndex.value].flag){
			getUserInfo()
		}
	}
	
	function getUserInfo(isloading){
		let item = newList.value[tabBarsIndex.value];
		if(isloading){
			switch(tabBarsIndex.value){
				case 0:
				
					getPaeApi(++item.page).then(res=>{
						item.list.push(...res);
						if(res.length<=0){
							item.loadingText="没有更多数据了";
						}else {
							item.loadingText="上拉加载更多";
						}
					})
					break;
				case 1:
					getListPaeApi(++item.page).then(res=>{
						item.list.push(...res);
						if(res.length<=0){
							item.loadingText="没有更多数据了";
						}else {
							item.loadingText="上拉加载更多";
						}
					})
					break;
				case 2:
					getFansPaeApi(++item.page).then(res=>{
						item.list.push(...res);
						if(res.length<=0){
							item.loadingText="没有更多数据了";
						}else {
							item.loadingText="上拉加载更多";
						}
					})
					break;
			}
			
		}else {
			switch(tabBarsIndex.value){
				case 0:
					getPaeApi(1).then(res=>{
						console.log(res)
						item.list.splice(0,item.list.length);
						item.list.push(...res);
						item.flag = true;
					})
					break;
				case 1:
					getListPaeApi(1).then(res=>{
						item.list.splice(0,item.list.length);
						item.list.push(...res);
						item.flag = true;
					})
					break;
				case 2:
					getFansPaeApi(1).then(res=>{
						item.list.splice(0,item.list.length);
						item.list.push(...res);
						item.flag = true;
					})
					break;
				
			}
		}
	}
	
	function loadingScroll(index){
		// 判断如果加载状态不等于加载更多
		if(newList.value[index].loadingText!="上拉加载更多")return;
		newList.value[index].loadingText="加载中...";
		setTimeout(()=>{
			let obj = {
					userpic:"../../static/new.jpg",
					username:"昵称",
					age:20,
					sex:1,
					isguanzhu:true,
				};
			newList.value[index].list.push(obj);
			
		},1000)
	}
	
	
	// 监听导航按钮
	onNavigationBarButtonTap((e)=>{
		if(e.index==0){
			uni.navigateBack(1)
		}
	})
	
	// 监听搜索框确认事件
	onNavigationBarSearchInputConfirmed(()=>{
		
	})
	
	// 监听搜索框改变事件
	onNavigationBarSearchInputChanged(()=>{
		
	})
	
	onMounted(()=>{
		swiperTabHeadRef.value.switchTabbar(null,0)
		getUserInfo()
	})
	
	
</script>

<style lang="scss" scoped>
	
</style>
